<template>
	<view class="page">
		<view >
			<view class="" v-for="item in list" :key="item.goodsId">
				<view  class="flex items-center pp mbp" style="border-bottom: 1px solid #eee;background-color: #fff;">
					<image
						:src="item.goodsInfo.logo"
						alt="joy" style="border-radius: 4px; margin-right: 12px;height: 80px;width: 80px;" />
						<view class="flex-1 flex flex-col " style="gap: 2px;">
							<view style="font-size: 15px;color: #000;">
								{{item.goodsInfo.name}}
							</view>
							<view style="color: rgba(0,0,0,0.25); font-size: 12px;">库存:{{item.goodsInfo.stock}}</view>
							<view style="color: rgba(0,0,0,0.25); font-size: 12px;">已售:{{item.goodsInfo.initSale}}</view>
							<view class="flex " style="justify-content: space-between;">
								<view style="color: red;font-size: 16px;margin-bottom: 10rpx;">
									¥{{item.goodsInfo.price}}
								</view>
								<wd-input-number v-model="item.num" :max="item.goodsInfo.stock - item.goodsInfo.initSale " @minClick="handleNumberChange('-',item.goodsInfo)" @plusClick="handleNumberChange('+',item.goodsInfo)" />
							</view>
						</view>
				</view>
			</view>
		</view>
		<view class="footer flex items-center pxp" style="justify-content: space-between;">
			<view style="font-size: 32rpx;color: red;">
				¥{{total}}
			</view>
			<view class="">
				<wd-button :disabled="total ===  0" @click="handleGoToOrder">下单</wd-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		computed
	} from 'vue';
	import userApi from "@/api/user.js"

	const list = ref([])
	
	const total = computed(()=>{
		let number = 0
		if(list.value.length){
			list.value.map(item =>{
				number = number + (item.goodsInfo.price * item.num)
			})
		}
		return number
	})
	

	onShow((e)=> {
		userApi.getCartList().then(cartRes =>{
			list.value = cartRes.list
		})
	})
	
	const handleGoToOrder = (e) =>{
		uni.navigateTo({
			url: "/pages/shop/order"
		})	
	}
	
	const handleNumberChange = (action ,cell) =>{
		userApi.cartSave({
			action : action,
			goodsId : cell.id
		})
	}
</script>

<style lang="scss" scoped>
	.footer{
		height: 120rpx;
		background-color: #fff;
		border-top: 1px solid #eee;
		position: fixed;
		bottom: 0px;
		left : 0;
		right: 0;
		padding-bottom: calc(env(safe-area-inset-bottom) );
	}
	
	.wraper {
		height: calc(100vh - var(--window-top) - 120rpx);
	}
</style>